<template>
  <div class="dashboard-editor-container">

    <!--  顶部展示图形 统计乘客、航班、行李、告警 -->
    <panel-group @handleSetLineChartData="handleSetLineChartData"
                 :ck-lg="ckLg" :ck-xl-lg="ckXlLg" :flight-lg="flightLg" :error-lg="errorLg"/>

    <!--  折线图  -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <!--  资源规划  -->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>

      <!--  早到仓库使用分析  -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>

      <!--  资源分析  -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper" >
            <bar-chart/>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import { statisticsNum, statisticsCk, statisticsFlight,
  statisticsCkxl, statisticsErrorNotice } from '@/api/homePage/home'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: {},
      ckLg:0,
      ckXlLg:0,
      flightLg:0,
      errorLg:0
    }
  },
  created() {
    this.getAllNum();
    this.handleSetLineChartData('ck');
  },
  methods: {
    handleSetLineChartData(type) {
      if(type == 'ck'){
        this.getStatisticsCk();
      }else if(type == 'flight'){
        this.getStatisticsFlight()
      }else if(type == 'ckxl'){
        this.getStatisticsCkxl()
      }else if(type == 'error'){
        this.getStatisticsError()
      }
    },

    //查询所有数量
    getAllNum(){
      statisticsNum().then(response => {
        this.ckLg = Number(response.data.allCkNum);
        this.flightLg = Number(response.data.allFlightNum);
        this.ckXlLg = Number(response.data.allCkXlNum);
        this.errorLg = Number(response.data.allErrorNum);
      });
    },

    //乘客
    getStatisticsCk(){
      statisticsCk().then(response => {
        const expectedData = this.fillArray(response.data.expectedData);
        //const actualData = this.fillArray(response.data.actualData);
        const xAxisData = this.fillArray(response.data.xaxisData);
        this.lineChartData = {
          expectedData: expectedData,
          actualData: [],
          xAxisData: xAxisData,
          lData: ['乘客数量']
        };
      });
    },

    //航班
    getStatisticsFlight(){
      statisticsFlight().then(response => {
        const expectedData = this.fillArray(response.data.expectedData);
        const actualData = this.fillArray(response.data.actualData);
        const xAxisData = this.fillArray(response.data.xaxisData);
        this.lineChartData = {
          expectedData: expectedData,
          actualData: actualData,
          xAxisData: xAxisData,
          lData: ['直达', '中转']
        };
      });
    },

    //乘客行李
    getStatisticsCkxl(){
      statisticsCkxl().then(response => {
        const expectedData = this.fillArray(response.data.expectedData);
        const actualData = this.fillArray(response.data.actualData);
        const xAxisData = this.fillArray(response.data.xaxisData);
        this.lineChartData = {
          expectedData: expectedData,
          actualData: actualData,
          xAxisData: xAxisData,
          lData: ['早到', '正常']
        };
      });
    },

    //异常
    getStatisticsError(){
      statisticsErrorNotice().then(response => {
        const expectedData = this.fillArray(response.data.expectedData);
        const actualData = this.fillArray(response.data.actualData);
        const xAxisData = this.fillArray(response.data.xaxisData);
        this.lineChartData = {
          expectedData: expectedData,
          actualData: actualData,
          xAxisData: xAxisData,
          lData: ['已处理', '未处理']
        };
      });
    },

    //完善数组集合
    fillArray(data){
      const array = [];
      data.forEach((item, index) => {
        // 对每个item进行处理
        array.push(item)
      });
      return array;
    },

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0px;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
